<link rel="stylesheet" type="text/css" href="../Styles/css_main.css">

<style type="text/css">

#exemplar_selecionado_proposta {
	width: 304px;
	margin-top: 90px;	
	margin-left: 40px;
	border-right: solid 1px #98A0A3;
	position:fixed;
	
}

#exemplares_user_proposta{
	width:72%;
	margin-top: 30px;	
	/* ou padding */
	margin-left: 350px;
	position:absolute;
}

.hint{
	width: 40%;	
}



.hint p {
    margin-top: 0px;
    padding-top: 6px;

}

.item {
	margin-top: 20px;
	margin-left: 20px;
	width: 140px;
	height: 150px;
	border: thick;

	border-radius: 7px;
	position:relative;
	float: left;
}

.item > img {
	padding-top: 10px;
    padding-left: 23px;
    padding-bottom: 5px;
}


</style>

<script type="text/javascript">

	exemplares = new Array();
	var contador = 0;

	function controlaExemplares(){
		
		if ($('#exemplares_user_proposta').height() > 600){
			$('#principal').css('height',  $('#exemplares_user_proposta').height() + 80);
		}
		
		$(".item").on("mouseover", function() {
			$(this).css("background", "#98A0A3");
		})
		
		$(".item").on("mouseout", function() {
			
			var id = $(this).prop("id");
			var muda = true;

			for (var i = 0; i < exemplares.length; i++) {
				if ( exemplares[i] == id ) { muda = false; }
			}
			
			if (muda == true) {
				$(this).css("background", "#CCCCCC");
			}
		})
		
		$(".item").on("click", function() {
			
			var id = $(this).prop("id");
			var existe = false;
			var posicao;
			
			for (var i = 0; i < exemplares.length; i++) {
				if ( exemplares[i] == id ) { existe = true; posicao = i; }
			}

			if (existe == false) {
				if (contador <= 2){
					$(this).css("background-color", "#98A0A3");
					exemplares[contador] = $(this).prop("id");
					contador++;
				}  else {
					alert("Limite de 3 Exemplares na Nova Proposta!");
				}
			} else {
				$(this).css("background", "#CCCCCC");
				exemplares.splice(posicao, 1);
				contador--;
			}
		})
		
	}

	function enviaProposta(){
		
		insereProposta($('#id_exemplar_proposta').val(), exemplares, $('#formatroca').val()); 
	}
	
</script>

<div id="busca_item">    
    <select name="filtro_busca" id="filtro_busca" class="select_busca" >
         <?php
		
		  require_once ('../Controller/busca_categorias.php');
		  
		  for ($x = 1; $x <= count($categorias); $x++) {
		  	echo '<option value="'.$x.'">'.$categorias[$x].'</option>';
		  }		  
		  ?>
		  </select>
    </select>
    
	<input type="text" name="busca_item" id="busca_item" placeholder = "  Busca" class="busca">
</div>

<?php 

	$cdExemplar = $_GET['exemplar_id'];
	require_once ('../Controller/busca_exemplares_user_proposta.php');
	
	global $exemplar;
	
	?>
		<div id="exemplar_selecionado_proposta">
			<input type="hidden" id="id_exemplar_proposta" value="<?php echo $cdExemplar; ?>">
			<p id="troco_esse" align="center" style="margin-bottom: 20px; font-weight:bold; font-size: 16px;">Quero trocar esse Item:</p>
			<p id="nome_user_item_proposta" align="center" style="font-style: italic; font-size: 12px;">de <?php echo $exemplar[0]->nmUsuario;  ?></p>
			
			<img src="../Content/itens/<?php echo $exemplar[0]->cdItem; ?>.jpg" id="img_item_proposta" width="200" height="200" style="padding-left: 50px; padding-bottom: 10px;" />
			
			<p id="nome_item_proposta" align="center"><?php echo $exemplar[0]->nmExemplar;  ?></p>
			<p id="info_item_proposta" align="center"><?php echo $exemplar[0]->nmPlataforma ."/". $exemplar[0]->dsCategoria; ?></p>   
			
			<p id="troco_esse" align="center" style="margin-top: 20px; margin-bottom: 10px; font-weight:bold; font-size: 14px;">Forma de troca:</p>

			<select name="formatroca" id="formatroca" style="width: 150px; margin-left: 75px; margin-bottom: 40px;" >
				<?php
				  require_once ('../Controller/busca_formas_troca.php');
				  
				  for ($x = 1; $x <= count($forma_troca); $x++) {
					echo '<option value="'.$x.'">'.$forma_troca[$x].'</option>';
				  }		  
				?>
			</select>
			<a class="hint" style="margin-left: 85px; text-decoration: none; font-size:16px;" href="#" onClick="enviaProposta();">&nbsp; Enviar Proposta &nbsp;</a>
		</div>
	<?php


?>

<div id="exemplares_user_proposta">

<?php 
	function listaExemplar($busca){
		
		global $exemplares;
		
		if(empty($exemplares)) {
		
			echo '<div id="semitens" class="centro_azul borda-arredondada hint"><p>Não existem itens cadastrados, jovem gafanhoto. <a href="#" onclick="abreInsereExemplar(\'\');"> Cadastre</a>.<p></div>';
		
		} else {
		
			for ($x = 0; $x < count($exemplares); $x++) {
				
				if ($busca != ""){
					if (strripos($exemplares[$x]->nmExemplar, $busca) === false){			
						continue;	
					}
				}
				   
				?> 
					<div id="<?php echo $exemplares[$x]->cdExemplar; ?>" class="item">
						<img src="../Content/itens/<?php echo $exemplares[$x]->cdItem; ?>.jpg" width="90" height="90" style="border-radius: 80px;"/>
 						<p id="nome_exemplar" align="center"><?php echo $exemplares[$x]->nmExemplar; ?></p>
                        <p id="nome_exemplar" align="center" style="font-style: italic;"><?php echo $exemplares[$x]->nmPlataforma; ?></p>
					</div>	
				<?php
			}		
					
			?>                   
  				<script>controlaExemplares();</script>
			<?php
		}
	}
		
	echo '<p id="troco_esse" align="center" style="margin-top: 20px; font-weight:bold; font-size: 16px;">Por esse(s) Item(ns):</p>';
	listaExemplar("");
	
?>

</div>